<template>
  <view id="main">
    <!-- 顶部搜索框 -->
    <yz-topBar showBack height="40" color="#000">
      <template #center>
        <view class="search-box flex">
          <uni-icons @tap="search" type="search" color="#000" size="24" />
          <input
            v-model="searchValue"
            placeholder="请输入关键词搜索"
            placeholder-style="color:#000,font-size:14px"
            @input="changeSearchValue"
            @confirm="search"
          />
        </view>
      </template>
      <template #right>
        <view @tap="search" class="right fs_18 color_green"> 搜索 </view>
      </template>
    </yz-topBar>
    <!-- list -->
    <view class="content">
      <scroll-view @scrolltolower="scrolltolower" class="scroll" scroll-y>
        <view
          v-for="(item, index) in woundedStore.searchListData.searchList"
          :key="item.TagUuid"
          :class="[woundedStore.TagStatus]"
          class="card list_item"
        >
          <view class="tag top_tag fs_12"> 伤票码 </view>
          <view class="card_content">
            <view class="handle_box flex">
              <view class="code fs_17 color_black text_overflow">
                {{ item.TagCode }}
              </view>
              <view class="right_box flex">
                <view class="tag">
                  {{ item.TagStatusName }}
                </view>
                <uni-icons
                  @tap="toHandleWounded(item.TagCode)"
                  type="right"
                  color="#8D8F9B"
                  size="22"
                />
              </view>
            </view>
            <view class="info_box flex fs_12 color_gray">
              <view class="time flex">
                <view class="label">**时间:</view>
                <view>{{ item.AddTime }}</view>
              </view>
              <view v-if="woundedStore.TagStatus === 'TagStatus3'" class="whereabouts flex">
                <view class="label"> 后送去向：</view>
                <view> {{ item.GoDestName || '--' }} </view>
              </view>
            </view>
          </view>
        </view>
        <view style="text-align: center" v-if="woundedStore.islower"> ... 加载中 ... </view>
      </scroll-view>
    </view>
  </view>
  <yz-tips v-if="toast.show" :title="toast.title"> </yz-tips>
</template>

<script lang="ts" setup>
import { useToastStore } from '@/stores/modules/toast'
const toast = useToastStore()
import { useWoundedfzStore } from '@/stores/modules/woundedfz'
const woundedStore = useWoundedfzStore()
import { onLoad, onHide } from '@dcloudio/uni-app'
const searchValue = ref('') // 搜索框输入值
onLoad(async (options: any) => {
  searchValue.value = woundedStore.searchParam
  await woundedStore.getWoundedList()
})
onHide(() => {
  woundedStore.clearDate()
})
const scrolltolower = async () => {
  await woundedStore.getWoundedList()
}
const changeSearchValue = (e: any) => {
  woundedStore.searchParam = e.detail.value
}
const search = () => {
  woundedStore.getWoundedList()
}
// 跳转到处理伤员页面
const toHandleWounded = (TagCode: string) => {
  uni.navigateTo({
    url: `/pages/wounded/handlewounded/handlewounded?TagCode=${TagCode}`,
  })
}
</script>

<style lang="scss" scoped>
.right {
  margin-right: 10px;
}
.search-box {
  margin-right: 12px;
  width: 246px;
  height: 40px;
  border-radius: 8px;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.08);
  background: rgb(244, 244, 244);
  padding-left: 10px;
  input {
    width: 95%;
  }
}
.content {
  height: calc(100vh - 50px - 24px);
  width: 100vw;
  .scroll {
    padding: 0 12px;
    width: 100%;
    height: 100%;
    .list_item {
      margin: 10px 5px 20px 5px;
      padding: 24px 12px 12px;
      position: relative;
      box-shadow: 0px 1px 10px #00000014 !important;
      .tag {
        border-radius: 4px;
        padding: 4px 8px;
        font-size: 10px;
        &.top_tag {
          border-radius: 0px 0px 4px 4px;
          position: absolute;
          font-size: 12px;
          top: 0;
          left: 12px;
        }
      }
      //待分配
      &.TagStatus1 {
        .tag {
          color: #f49b0a;
          background: rgb(255, 242, 226);
        }
      }
      //诊疗中
      &.TagStatus2 {
        .tag {
          color: #00bec5;
          background: rgb(229, 248, 248);
        }
      }
      //后送伤票
      &.TagStatus3 {
        .tag {
          color: #1064fb;
          background: rgb(221, 233, 255);
        }
      }
      .card_content {
        .handle_box,
        .info_box {
          margin-top: 10px;
          justify-content: space-between;
        }
        .handle_box {
          .text_overflow {
            max-width: 70%;
          }
        }
        .info_box {
          padding: 10px;
          border-radius: 6px;
          background: rgb(247, 248, 250);
          .label {
            color: #bcbfc8;
          }
        }
      }
    }
  }
}
</style>
